<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        body {
            background-color: #76838f;
            word-wrap: break-word;
            overflow-x: hidden;
        }

        .el-header .el-menu-item a {
            font-size: 15px;
            text-decoration: none;
            color: white;
        }

        .el-menu.el-menu--horizontal {
            border: 0; /*去掉导航菜单 自带的边框*/
        }

        .el-header img {
            position: relative;
        }

        #el-main-div1 {
            font-size: 15px;
            color: #76838f;
            margin: 25px 0 0 250px;
        }

        #el-main-src1 {
            margin: 10px 0 0 350px;
        }

        a {
            text-decoration: none;
            color: #000;
            text-align: center;
        }

        li {
            orderList-style: none;
            margin-right: 40px;
            font-size: 14px;
        }


    </style>
</head>
<body>
<div id="app">
    <el-header height="60px" style="background-color: #545c64;position:fixed;top:0;left:0;width:100%;z-index:9999">
        <div style="width: 1200px;margin: 0 auto">
            <img src="../img/zhaopai.jpg" style="vertical-align: middle" width="150" height="60">
            <span style="float:right;margin-right: 10px;">
                    <el-menu mode="horizontal" style="background-color: #545c64">
                        <el-menu-item index="1"><a href="首页.html">网站首页</a></el-menu-item>
                        <el-menu-item index="2"><a href="关于我们.html">关于我们</a></el-menu-item>
                        <el-menu-item index="3"><a href="photoPrice.html">拍摄价格</a></el-menu-item>
                        <el-menu-item index="4"><a href="作品展示.html">作品展示</a></el-menu-item>
                        <el-menu-item index="5"><a href="联系我们.html">联系我们</a></el-menu-item>
                    </el-menu>
                </span>
        </div>
    </el-header>
    <el-main style="width: 100%">
        <el-card style="background-color: #e8e8e8">
            <div>
                <el-carousel height="300px">
                    <el-carousel-item><img src="https://www.dabeiphoto.com.cn/upload/201901/1547538851.jpg" width="100%"
                                           height="100%"></el-carousel-item>
                </el-carousel>
            </div>
            <el-card style="margin-bottom: 30px">
                <div id="el-main-div1">你的位置》 <i class="el-icon-s-home"></i>网站首页》 拍摄价格》 儿童摄影
                    <el-divider></el-divider>
                </div>
                <div>
                    <el-row gutter="30px" id="el-main-el-row1">
                        <el-col span="14">                          <!--第一张图片-->
                            <img id="el-main-src1"
                                 src="https://www.dabeiphoto.com.cn/upload/thumb_src/560_400/1660034872207110.jpg">
                        </el-col>
                        <el-col span="10">
                            <p style="font-size: 25px;margin-bottom: 0px">传统全家福合影</p>
                            <p style="font-size: 14px;margin-bottom: 5px">大北照相馆有众多特色合影背景可选，还可按您的需求 <br>配置精美相框等多种风格样式。
                            </p>
                            <el-col span="8">
                                <p style="font-size: 14px;">规格： 按套系</p>
                                <p style="font-size: 14px;">价格： 按条件计算</p>
                                <p style="font-size: 14px;margin-bottom: 30px">加一文件价格：</p>
                                <p style="font-size: 14px;">是否预约： 电话预约</p>
                            </el-col>
                            <el-col span="16">
                                <p style="font-size: 14px;">每份张数： 按套系</p>
                                <p style="font-size: 14px;">加洗一张价格：</p>
                                <p style="font-size: 14px;">拍摄门店： 前门店,花市店,甘家口 <br>店,星火店,龙德广场店</p>
                            </el-col>
                        </el-col>
                    </el-row>
                </div>
            </el-card>
            <div>
                <el-row gutter="20" align="center">
                    <el-col span="4" style="margin-left: 200px">
                        <el-card style="text-align: center;">
                            <ul>
                                <li><a href="../photoPrice.html" title="拍摄价格"><span
                                        style="color: #1baadb;font-size: 24px;">拍摄价格</span></a></li>
                                <li>
                                    <hr>
                                    <a href="../photoPrice1-1.html" title="儿童摄影"><span>儿童摄影</span></a></li>
                                <li>
                                    <hr>
                                    <a href="../photoPrice1-2.html" title="家庭合影"><span>家庭合影</span></a></li>
                                <li>
                                    <hr>
                                    <a href="../photoPrice1-3.html" title="艺术摄影"><span>艺术摄影</span></a></li>
                                <li>
                                    <hr>
                                    <a href="../photoPrice1-4.html" title="戏装摄影"><span>戏装摄影</span></a></li>
                                <li>
                                    <hr>
                                    <a href="../photoPrice1-5.html" title="证件摄影"><span>证件摄影</span></a></li>
                                <li>
                                    <hr>
                                    <a href="../photoPrice1-6.html" title="经典套照"><span>经典套照</span></a></li>
                            </ul>
                        </el-card>
                    </el-col>
                    <el-col span="14">
                        <el-card style="height: 1550px;">                          <!--根据页面改长短-->
                            <p style="margin-left: 20px">详情信息:</p>
                            <el-divider></el-divider>
                            <template>
                                <el-table
                                        :data="tableData"
                                        border
                                        style="width: 100%;
                        width: 800px;
                        margin: 0 auto">
                                    <el-table-column
                                            prop="num"
                                            label="人数"
                                            width="120"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="price1"
                                            label="20寸（精品镜框装裱）"
                                            width="180"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="price2"
                                            label="24寸（精品镜框装裱）"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="price3"
                                            label="30寸（精品镜框装裱）"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="price4"
                                            label="36寸（精品镜框装裱）"
                                            align="center">
                                    </el-table-column>
                                </el-table>
                            </template>
                            <div style="margin-left: 60px">
                                <p>备注:</p>
                                <p>1、套系内包含每人服装造型一套。</p>
                                <p>2、加洗文件每张为原价4折。</p>
                                <p>3、加选照片按普通合影收费。</p>
                            </div>
                            <div style="text-align: center;margin-top: 50px" class="el-main-div2">
                                <img style="width: 780px"
                                     src="https://www.dabeiphoto.com.cn/upload/202208/1660034872207110.jpg">
                            </div>
                            </el-input>
                            <el-divider></el-divider>
                            <div style="margin: 20px 0;">
                                <p style="text-align: center">当前还没有人发表过评论......</p>
                            </div>
                            <el-input
                                    type="textarea"
                                    placeholder="说点什么吧...."
                                    v-model="textarea"
                                    maxlength="50"
                                    show-word-limit
                                    style="height: 40px;
                      margin-bottom: 15px">
                            </el-input>
                            <el-button style="float:right;">发表</el-button>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </el-card>
    </el-main>
    <el-footer>
        <div style="background-color: #545c64;text-align: center;
             color: white;padding: 50px 0">
            <p>大北照相馆官方网站，为您提供照相前指导，普及照相知识，提供优质网络服务！</p>
            <p>北京大北照相有限责任公司 京ICP备15047318号-1 </p>
        </div>
    </el-footer>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                tableData: [{
                    num: '3人',
                    price1: '970元',
                    price2: '1040元',
                    price3: '1250元',
                    price4: '1510元',
                }, {
                    num: '4人',
                    price1: '1140元',
                    price2: '1210元',
                    price3: '1420元',
                    price4: '1680元',
                }, {
                    num: '5人',
                    price1: '1310元',
                    price2: '1380元',
                    price3: '1590元',
                    price4: '1850元',
                }, {
                    num: '6人',
                    price1: '1480元',
                    price2: '1550元',
                    price3: '1760元',
                    price4: '2020元',
                }, {
                    num: '7人',
                    price1: '1650元',
                    price2: '1720元',
                    price3: '1930元',
                    price4: '2190元',
                }, {
                    num: '8人',
                    price1: '1820元',
                    price2: '1890元',
                    price3: '2100元',
                    price4: '2360元',
                }, {
                    num: '9人',
                    price1: '1990元',
                    price2: '2060元',
                    price3: '2270元',
                    price4: '2530元',
                }, {
                    num: '10人',
                    price1: '2160元',
                    price2: '2230元',
                    price3: '2270元',
                    price4: '2700元',
                }],
                text: '',
                textarea: ''
            }
        },
        methods: {}
    })
</script>
</html>